<template>
  <z-transfer
    v-model:target-keys="targetKeys"
    v-model:selected-keys="selectedKeys"
    :data-source="mockData"
    :titles="['Source', 'Target']"
    :render="item => item.title"
    :disabled="disabled"
    @change="handleChange"
    :one-way="true"
    @selectChange="handleSelectChange"
    @scroll="handleScroll"
  />
</template>

<script>
import { defineComponent, ref } from "vue";

const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  });
}

export default defineComponent({
  setup() {
    const disabled = ref(false);

    const targetKeys = ref([]);

    const selectedKeys = ref(['1', '4']);

    const handleChange = (nextTargetKeys, direction, moveKeys) => {
      console.log('targetKeys: ', nextTargetKeys);
      console.log('direction: ', direction);
      console.log('moveKeys: ', moveKeys);
    };
    const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
      console.log('sourceSelectedKeys: ', sourceSelectedKeys);
      console.log('targetSelectedKeys: ', targetSelectedKeys);
    };
    const handleScroll = (direction, e) => {
      console.log('direction:', direction);
      console.log('target:', e.target);
    };
    return {
      mockData,
      disabled,
      targetKeys,
      selectedKeys,
      handleChange,
      handleSelectChange,
      handleScroll
    }
  }
})
</script>